<template>
  <svg class="td-icon" aria-hidden="true" fill="currentColor">
    <use :xlink:href="symbolId" :fill="color" />
  </svg>
</template>

<script lang="ts" setup>
  import { computed } from 'vue';

  defineOptions({
    name: 'Icon',
  });

  const props = defineProps({
    prefix: {
      type: String,
      default: '',
    },
    name: {
      type: String,
      required: true,
    },
    color: {
      type: String,
      default: '',
    },
  });

  const symbolId = computed(() => {
    const { prefix, name } = props;
    let id = `#icon-${name}`;
    if (prefix) {
      id = `#icon-${prefix}-${name}`;
    }
    return id;
  });
</script>

<style scoped lang="less">
  .td-icon {
    width: 14px;
    height: 14px;

    &:focus {
      outline: none !important;
    }
  }
</style>
